<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>常用指令练习</title><style>
    .my{
        border: 1px solid red;
    }
    h3{
        color: red;
    }
</style>
    
</head>
<body>
<div id="div1">
    <h3>指令练习:v-html</h3>
    <div>{{msg}}</div>
    <div v-html="msg"></div>
</div>

<div id = "div2">
    <h3>指令练习:v-bind</h3>
    <a v-bind:href="url" >百度一下</a>
    <br>
    <a :href="url">百度一下</a>
    <br>
    <div :class="cls">我是div</div>
</div>

<div id="div3">
    <h3>指令练习:v-if、v-else-if和v-else</h3>
        
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">可以被3整除</div>
        <div v-else-if="num % 3 == 1">余数为1</div>
        <div v-else="num % 3 == 2">余数为2</div>
        <div v-show="flag">div4</div>

</div>

<div id="div4">
    <h3>指令练习:v-for</h3>
    <ul>
        <li v-for="name in names">
            {{name}}
        </li>
        <li v-for="value in student">
            {{value}}
        </li>
    </ul>
</div>
<div id="div5">
    <h3>指令练习:v-on</h3>
    <div>{{name}}</div>
    <button v-on:click="change1()">单击改变div的内容1</button>
    <button v-on:dblclick="change2()">双击改变div的内容2</button>
    <button @click="change3()">单击改变div的内容3</button>
</div>

<!--v-model:在表单上创建双向数据绑定-->
<div id="div6">
    <h3>指令练习:v-model</h3>
    <form autocomplete="off">
        姓名：<input type="text" name="username" v-model="username">
        <br>
        年龄：<input type="number" name="age" v-model="age">
    </form>
    <div>展示姓名：{{username}}</div>
    <div>展示年龄：{{age}}</div>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div1",
        data:{
            msg:"<b>hello Vue</b>"
        }
    });
    new Vue({
        el:"#div2",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });

    new Vue({
        el:"#div3",
        data:{
           num:"8",
            flag:false
        }
    })

    new Vue({
        el:"#div4",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"路飞",
                age:23
            }
        }
    })

    new Vue({
        el:"#div5",
        data:{
            name:"张三"
        },
        methods:{
            change1(){
                this.name = "张三"
            },
            change2(){
                this.name = "李四"
            },
            change3(){
                this.name = "王五"
            }
        }
    });


    new Vue({
        el:"#div6",
        data:{
            username:"张三",
            age:23
        }
    })
</script>